<!-- <template>
	<view class="container">
		
		<view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
		<text class="intro">详见：</text>
		<uni-link :href="href" :text="href"></uni-link>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style> -->
<template>
	<view>
		<!-- <view class="one-right" @click="sell">
			<p>保障<span>支持7天无理由退款·消费者保障服务</span></p>
		</view>
		<view class="share">
			<view :class="{'box': share}" @click="display">
			</view>
			<view class="share-item" :class="{'show': share}">
				<view class="share-con">
					<p class="title">保障说明<span  @click.stop="display">×</span></p>
					<view class="cont flex">
						<image src="../../static/seven.jpg"></image>
						<view class="cont-r">
							<p class="strong">支持7天无理由退货</p>
							1.未使用的，可全额退款<br>
							2.使用部分优惠券的，退款时直接扣除已发生抵扣金额后予以退款，即退款金额=购买金额-已使用优惠券面额

						</view>
					</view>
					<view class="cont flex">
						<image src="../../static/dui.jpg"></image>
						<view class="cont-r">
							<p class="strong">消费者保障服务</p>
							如商品存在与描述不符的情况，你有权申请退款
					
						</view>
						
					</view>
				
				</view>
				
				
				
			</view>
		</view> -->
		
		
		
					<view class="zz-sel-box">
						<view @click="changeMoney(0)" :class="{selStyle:money == 0}" class="zz-sel-item">
							其他面额
						</view>
						<view @click="changeMoney(300)" :class="{selStyle:money == 300}" class="zz-sel-item">
							300元
						</view>
						<view @click="changeMoney(500)" :class="{selStyle:money == 500}" class="zz-sel-item">
							500元
						</view>
						<view @click="changeMoney(1000)" :class="{selStyle:money == 1000}" class="zz-sel-item">
							1000元
						</view>
					</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				share: false,
				money:0
			}
		},
		methods: {
			sell() {
				this.share = true;
			},
			// 隐藏分享
			display() {
				this.share = false;
			},
			changeMoney(money) {
							console.log(money)
							this.money = money
						}

		}
	}
</script>

<style lang="scss">
		.selStyle {	
			border-image: linear-gradient(120deg, rgba(255, 180, 9, 1), rgba(242, 158, 0, 1)) 2 2;
			border: 2rpx solid #F29E00;
			box-shadow: 0px 4px 8px 0px rgba(233, 201, 152, 0.51);
		}
	.share {
		width: 100%;
		height: 100%;
		background: #000000;
		position: relative;
		z-index: 1;
	}

	.box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		bottom: 0rpx;
		right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: 999;
	}

	// 进入分享动画
	.show {
		transition: all 0.3s ease;
		transform: translateY(0%) !important;
	}

	// 离开分享动画
	.share-item {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		background-color: #fff;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 1999;
    border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		
		.share-con {
			width: 90%;
			height: 550rpx;
			padding: 30rpx;
			margin: auto;
			align-items: center;
		}
  
	.flex{display: flex;justify-content: space-between;}
		.cont-r{width: 80%;padding-left: 20rpx;font-size: 28rpx;color: #666;line-height: 45rpx;}
		.cont image{width: 140rpx ;height: 140rpx;}
    .title{font-size: 50rpx;font-weight: bold;text-align: center;margin-bottom: 20rpx;}
		.title span{float:right;color: #999;}
		.cont{margin-bottom: 40rpx;}
		.strong{font-size: 35rpx;color: #000000;margin-bottom: 10rpx;}
	}
</style>

